<template>
  <el-card>
    <el-carousel trigger="click" indicator-position="outside">
      <el-carousel-item v-for="(item, index) in newsList" :key="index">
        <el-row>
          <el-col :span="12">
            <el-image :src="item.src" fit="fill"></el-image>
          </el-col>
          <el-col :span="12">
            <div class="right" @click="handlerNewsDetail">
              <div class="title">{{ item.title }}</div>
              <div class="content">{{ item.content }}</div>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </el-card>
</template>

<script>
export default {
  name: 'NewsCard',
  props: {
    newsList: {
      type: Array,
      required: false,
      default: [
        {
          src: require('@/assets/images/avatar.jpg'),
          title: '冬奥会111',
          content: '相信这些天经过信这些天经过信这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过信这些天经过一层大堂，你也曾驻足聆听，被电视里那些动人的视频片段所感动。他们夜以继日地辛勤付出，他们牺牲陪伴家人孩子的时间，他们不顾身体原因坚守岗位，只为完成一个个艰巨的任务，最终大家凝心聚力，一起跨越巅峰，打了一场漂亮的翻身仗！对此，公司举办了隆重的表彰大会，对他们进行了一系列表彰，在此也让我们'
        }
      ]
    }
  },
  data () {
    return {}
  },
  methods: {
    handlerNewsDetail () {
      console.log('查看新闻详情')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  /deep/ .el-card__body {
    padding: 10px 10px 0 !important;
  }

  .el-row {
    width: 100%;
    height: 100%;

    .el-col {
      height: 100%;

      .el-image {
        width: 100%;
        height: 100%;
      }

      .right {
        display: flex;
        flex-direction: column;
        cursor: pointer;

        .title {
          text-align: center;
          padding: 1rem 0;
          font-size: 1.3rem;
          color: #3498db;
        }

        .content {
          flex: 1;
          text-indent: 1.5rem;
          font-size: 0.5rem;
          margin: 0 1rem;
          line-height: 1.25rem;
          color: #79797b;

          // 溢出隐藏，显示...
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 12;
        }
      }
    }
  }
}
</style>
